<template>
	<view class="w-flex-col page">
		<view class="w-self-center font_1 font_2"><text>扫码连接WIFI</text></view>
		<view class="w-flex-col w-justify-start w-items-center w-relative group">
			<view class="w-flex-col w-relative section space-y-73">
				<image class="w-self-center image" :src="qrcode" />
				<view class="w-flex-col w-items-center section_5 space-y-34">
					<text class="font_1 text">NO.{{Math.floor(Math.random() * 900000) + 100000}}{{id}}</text>
					<text class="text_2">一键连接 无需告知密码 安全防蹭网</text>
				</view>
			</view>
			<view class="section_4 pos_4"></view>
			<view class="section_4 pos_3"></view>
			<view class="section_3 pos_2"></view>
			<view class="section_2 pos"></view>
		</view>
		<view class="w-flex-row equal-division">
			<view class="w-flex-col w-items-center equal-division-item space-y-14" @tap="down()">
				<image class="image_2" src="/static/share/ea7cf04b3fbdd6d7f6b9048cea10fb12.png" />
				<text class="font_1">下载</text>
			</view>
			<button class="btn" plain open-type="share">
				<view class="w-flex-col w-items-center equal-division-item space-y-14">
					<image class="image_2" src="/static/share/dbd9c7907c9305708e5699774409972b.png" />
						<text class="font_1">分享</text>
				</view>
			</button>
			<view class="w-flex-col w-items-center equal-division-item space-y-14" @tap="goConnect">
				<image class="image_2" src="/static/share/a248eee3f07b304cbe6600f7f8044c7f.png" />
				<text class="font_1">预览</text>
			</view>
			<view class="w-flex-col w-items-center equal-division-item space-y-14" @tap="goEdit">
				<image class="image_2" src="/static/share/86fec10b1913b0404dce7e3949648e1b.png" />
				<text class="font_1">编辑</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				id:0,
				qrcode:''
			};
		},
		onLoad(e) {
			if (e.hasOwnProperty('id')) {
				this.id = e.id
			}
			if (e.hasOwnProperty('qrcode')) {
				this.qrcode = e.qrcode
			}
		},
		methods: {
			goEdit(){
				uni.navigateTo({
					url:"/pages/create/create?id=" + this.id
				})
			},
			goConnect(){
				uni.reLaunch({
					url:"/pages/connect_wifi/connect_wifi?scene=" + this.id
				})
			},
			down(){
				this.downImg(this.qrcode)
			},
			downImg(url){
			   const that = this;
				console.log("url",url)
			    uni.downloadFile({
			        url:url,//url为图片地址
			        success: res => {
						console.log("下载结果res",res)
			            if (res.statusCode === 200) {
			                uni.saveImageToPhotosAlbum({
			                    filePath: res.tempFilePath,
			                    success: function() {
			                        uni.showToast({
			                       		title:'保存成功'
			                       	})
			                    },
			                    fail: function() {
									uni.showToast({
										title:'保存失败，请稍后重试'
									})
			                    }
			                });
			            } else {
							uni.showToast({
								title:'保存失败，请稍后重试'
							})
			            }
			        }
			    });
			},

		},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		background-image: linear-gradient(180deg, #22b14C 26.9%, #22b14C 73.1%);
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.font_1 {
			font-size: 36rpx;
			font-family: SourceHanSansCN;
			line-height: 33rpx;
			color: #ffffff;
		}
		
		.font_2{
			position: absolute;
			top: 10%;
			font-size: 1.5rem;
		}

		.group {
			margin-top: 264rpx;

			.section {
				padding-top: 100rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
				box-shadow: 6rpx 6rpx 2rpx #e5e5e540;
				width: 496rpx;
				border: solid 2rpx #e5e5e5;

				.image {
					width: 328rpx;
					height: 328rpx;
				}

				.section_5 {
					padding: 56rpx 0 48rpx;
					background-color: #22b14C;
					border-radius: 0px 0px 20rpx 20rpx;

					.text {
						line-height: 27rpx;
					}

					.text_2 {
						color: #ffffff;
						font-size: 28rpx;
						font-family: SourceHanSansCN;
						line-height: 26rpx;
					}
				}

				.space-y-34 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 68rpx;
					}
				}
			}

			.space-y-73 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 146rpx;
				}
			}

			.section_4 {
				background-color: #cccccc;
				border-radius: 50%;
				width: 106rpx;
				height: 106rpx;
			}

			.pos_4 {
				position: absolute;
				right: 58rpx;
				top: 247rpx;
			}

			.pos_3 {
				position: absolute;
				left: 64rpx;
				top: 247rpx;
			}

			.section_3 {
				background-image: linear-gradient(180deg, #22b14C 26.9%, #22b14C 73.1%);
				width: 110rpx;
				height: 200rpx;
			}

			.pos_2 {
				position: absolute;
				right: 8.11px;
				top: 199rpx;
			}

			.section_2 {
				background-image: linear-gradient(180deg, #22b14C 26.9%, #22b14C 73.1%);
				width: 116rpx;
				height: 200rpx;
			}

			.pos {
				position: absolute;
				left: 5.7px;
				top: 199rpx;
			}
		}

		.equal-division {
			margin: 228rpx 44rpx 0 16rpx;

			.equal-division-item {
				flex: 1 1 166rpx;
				padding: 8rpx 0 16rpx;

				.image_2 {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.space-y-14 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 28rpx;
				}
			}
		}
	}
	.btn {
		border: none;
	}
</style>